<template>
	<view style="padding-bottom: 180upx;">

		<view class="bg margin-lr radius margin-top-sm flex padding">
			<image :src="orderList.fixedClassImg" style="width: 149upx;height: 149upx;border-radius: 8upx;"></image>
			<view class="margin-left-sm  ">
				<view class="flex align-center justify-between text-lg text-bold " style="width: 470upx;">
					<view class="  ">{{orderList.serviceName}}</view>
					<view style="color: #557EFD;" v-if="orderList.taskType==1">悬赏￥{{orderList.money}}</view>
					<view style="color: #557EFD;" v-if="orderList.taskType==2">报价￥{{orderList.money}}</view>
					<view style="color: #557EFD;" v-if="orderList.taskType==3">一口价￥{{orderList.money}}</view>
				</view>
				<view class="margin-tb-xs" style="color: #999999;">{{orderList.fixedClassifyName}}</view>
				<view>上门时间：{{orderList.deliveryTime}}</view>
			</view>
		</view>

		<view class="bg margin-lr radius margin-top-sm padding">
			<view>服务内容</view>
			<view class="margin-top">{{orderList.content}}</view>
			<view class="flex flex-wrap">
				<view v-for="(ite,ind) in orderList.image" :key="ind" class="margin-top margin-right-sm"
					@click="saveImg(orderList.image,ind)">
					<image :src="ite" style="width: 160upx; height: 160upx;border-radius: 5upx;"></image>
				</view>
			</view>
		</view>

		<view class="flex align-center justify-between bg margin padding radius"
			@tap="bindGps(orderList.latitude,orderList.longitude,orderList.detailsAddress)">
			<view>
				<view class="text-lg text-bold margin-bottom-xs">{{orderList.name}} {{orderList.phone}}</view>
				<view style="color: #999999;">{{orderList.province}} / {{orderList.city}} / {{orderList.district}} /
					{{orderList.detailsAddress}}
				</view>
			</view>
			<image src=".../../static/images/index/right.png" style="width: 15upx;height: 28upx;"></image>
		</view>

		<view class="bg margin-lr radius margin-top-sm padding">
			<view class="flex justify-between align-center">
				<view>联系发单人</view>
				<view style="color: #557EFD;text-align: right;">{{orderList.createTime}}</view>
			</view>
			<view class="flex margin-top-sm">
				<view v-if="orderList.user">
					<image :src="orderList.user.avatar?orderList.user.avatar:'../../static/logo.png'"
						style="width: 88upx;height: 88upx;border-radius: 50upx;"></image>
				</view>
				<view class="margin-left-xs" style="width: 100%;" v-if="orderList.user">
					<view>{{orderList.user.userName}}</view>
					<view class="flex align-center justify-between">
						<view class="wensheng text-cut"
							@tap="bindGps(orderList.latitude,orderList.longitude,orderList.detailsAddress)">
							{{orderList.detailsAddress}}
							<u-icon name="map"></u-icon>
						</view>
						<view class="flex align-center">
							<view @click="goMsg(orderList.user.userId,orderList.user.userName)">
								<image src="../static/xiaoxi.png" style="width: 60upx;height: 60upx;"></image>
							</view>
							<view @click="bindphone(orderList.user.phone)">
								<image src="../static/phone.png" style="width: 60upx;height: 60upx;margin-left: 25upx;">
								</image>
							</view>
						</view>
						<!-- <view class="lianxi" @click="bindphone(orderList.phone)">联系TA</view> -->
						<!-- <view class="lianxi" @click="goMsg(orderList.user.userId,orderList.user.userName)">联系TA</view> -->
					</view>
				</view>
			</view>
		</view>

		<view class="bg margin-lr radius margin-top-sm padding" v-if="orderList.helpTake&&orderList.helpTake.companyId">
			<view class="flex justify-between align-center">
				<view>联系员工</view>
				<view style="color: #557EFD;text-align: right;"></view>
			</view>
			<view class="flex margin-top-sm">
				<view>
					<image :src="order.avatar?order.avatar:'../../static/logo.png'"
						style="width: 88upx;height: 88upx;border-radius: 50upx;"></image>
				</view>
				<view class="margin-left-xs flex align-center justify-between" style="width: 100%;">
					<view>
						<view>{{order.userName}}</view>
						<view class="margin-top-xs">{{order.phone}}</view>
					</view>
					<view class="flex align-center">
						<view @click="goMsg(order.userId,order.userName)">
							<image src="../static/xiaoxi.png" style="width: 60upx;height: 60upx;"></image>
						</view>
						<view @click="bindphone(order.phone)">
							<image src="../static/phone.png" style="width: 60upx;height: 60upx;margin-left: 25upx;">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="bg padding radius margin-top margin-lr" v-if="orderList.status==3||orderList.status==4">
			<view class="text-lg text-bold margin-bottom">服务前照片</view>
			<view class="flex flex-wrap justify-between">
				<view class="flex margin-bottom-sm"
					style="width: 48%;height: 200rpx;margin-right: 5rpx;position: relative;"
					v-for="(image,index) in orderList.helpTake.startTaskImg" :key="index"
					@click="saveImg(orderList.helpTake.startTaskImg,index)">
					<image :src="image" style="width: 100%;height: 100%;border-radius: 10upx;" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>
		<view class="bg padding radius margin-top margin-lr" v-if="orderList.status==4">
			<view class="text-lg text-bold margin-bottom">服务后照片</view>
			<view class="flex flex-wrap justify-between">
				<view class="flex margin-bottom-sm"
					style="width: 48%;height: 200rpx;margin-right: 5rpx;position: relative;"
					v-for="(image,index) in orderList.helpTake.endTaskImg" :key="index"
					@click="saveImg( orderList.helpTake.endTaskImg,index)">
					<image :src="image" style="width: 100%;height: 100%;border-radius: 10upx;" mode="aspectFill">
					</image>
				</view>
			</view>
		</view>

		<view class="bg padding radius margin-top margin-lr" v-if="orderList.status==3">
			<view class="text-lg text-bold margin-bottom">服务后照片</view>
			<view class="flex flex-wrap">
				<view v-if="endImgs.length">
					<view class="flex margin-right-sm flex-wrap">
						<view class="flex" style="width: 200rpx;height: 200rpx;margin-right: 5rpx;position: relative;"
							v-for="(image,index) in endImgs" :key="index">
							<image :src="image" style="width: 100%;height: 100%;"></image>
							<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
								@click="removeImg(index,2)">
								<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="flex align-center justify-center padding-tb "
					style="background: #f5f5f5;width: 200rpx;height: 200rpx;">
					<view class="text-center" @click="addImage(2)">
						<image src="../static/photo.png" style="width:60upx;height: 50upx;"></image>
						<view class="text-sm">上传照片</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bg padding radius margin-top margin-lr" v-if="orderList.status==2">
			<view class="text-lg text-bold margin-bottom">服务前照片</view>
			<view class="flex flex-wrap">
				<view v-if="startImgs.length">
					<view class="flex margin-right-sm flex-wrap">
						<view class="flex" style="width: 200rpx;height: 200rpx;margin-right: 5rpx;position: relative;"
							v-for="(image,index) in startImgs" :key="index">
							<image :src="image" style="width: 100%;height: 100%;"></image>
							<view style="z-index: 9;position: absolute;top: -15rpx;right: -15rpx;"
								@click="removeImg(index,1)">
								<u-icon name="close-circle-fill" color="#2979ff" size="50rpx"></u-icon>
							</view>

						</view>
					</view>
				</view>
				<view class="flex align-center justify-center padding-tb "
					style="background: #f5f5f5;width: 200rpx;height: 200rpx;">
					<view class="text-center" @click="addImage(1)">
						<image src="../static/photo.png" style="width:60upx;height: 50upx;"></image>
						<view class="text-sm">上传照片</view>
					</view>
				</view>
			</view>
		</view>


		<view class="bg margin-lr radius margin-top-sm padding">
			<view class="text-lg text-bold">订单信息</view>
			<!-- <view class="flex justify-between align-center margin-top">
				<view>订单类型</view>
				<view>{{orderList.serviceName}}</view>
			</view> -->
			<view class="flex justify-between align-center margin-top">
				<view>下单时间</view>
				<view>{{orderList.createTime}}</view>
			</view>
			<view class="flex justify-between align-center margin-top">
				<view>订单编号</view>
				<view @click="copyOrder(orderList.orderNo)">{{orderList.orderNo}}
					<u-icon name="order"></u-icon>
				</view>
			</view>
		</view>
		<view class="tabber" v-if="orderList.status ==2||orderList.status ==3">
			<!-- <view class="btn2" @click.stop="openCode(orderList)" v-if="orderList.status ==3">完成服务</view> -->
			<view class="btn2 margin-right" @click.stop="zhipai(orderList)" v-if="orderList.status ==2">转派单</view>

			<!-- <view class="btn1 margin-right" @click.stop="cancelOrder(orderList)" v-if="orderList.status ==2">取消订单</view> -->
			<!-- <view class="btn2" @click.stop="cancelOrder1(orderList)" v-if="orderList.status ==2">开始服务</view> -->
		</view>

		<u-popup v-model="showPai" mode="bottom" border-radius="14" height="400px">
			<view class="padding">
				<view class="margin-top flex justify-between align-center" v-for="(item,index) in list" :key="index">
					<view class=" flex align-center">
						<image :src="item.avatar?item.avatar:'../../static/logo.png'"
							style="width: 70upx;height: 70upx;border-radius: 50%;"></image>
						<view class="margin-left-sm">
							<view class="text-lg text-bold">{{item.userName}}</view>
							<view class="margin-top-xs">{{item.phone}}</view>
						</view>
					</view>
					<view class="buttn" @click="zhipaoOrder(item)">转派单</view>
				</view>
			</view>
		</u-popup>

		<u-popup v-model="show" mode="center" width="500rpx" height="190px" border-radius="14" :closeable="true">
			<view class="padding-lr" style="margin-top: 30upx;">
				<view class="text-lg text-bold margin-bottom">确认码</view>
				<view class=" padding-lr-sm" style="background: #F5F5F5;">
					<u-input v-model="codes" type="number" placeholder="请输入确认码" @confirm="change()" />
					<!-- <input type="number" v-memo="code" placeholder="请输入确认码"/> -->
				</view>
				<view class="btn3" @click="sure()">确认</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showPai: false,
				list: [],
				page: 1,
				limit: 10,
				order: [],
				helpOrderId: '',
				orderList: [],
				show: false,
				codes: '',
				helpTakeId: '',
				startImgs: [],
				startImg: '',
				endImgs: [],
				endImg: '',
			}

		},
		onLoad(option) {
			console.log(option)
			this.helpOrderId = option.id
			if (this.helpOrderId) {
				this.getorderlist()
				this.getlist()
			}
		},
		methods: {
			//获取员工信息
			getStaffUser(StaffUserId) {
				let data = {
					userId: StaffUserId,
				}
				this.$Request.get("/app/user/selectStaffUser", data).then(res => {
					if (res.code == 0) {
						this.order = res.data
					}
				});
			},
			zhipai() {
				this.showPai = true
			},
			zhipaoOrder(e) {
				let data = {
					companyId: e.userId,
					takeId: this.orderList.helpTakeId
				}
				this.$Request.post('/app/help/distributionOrder', data).then(res => {
					if (res.code == 0) {
						uni.navigateBack()
					} else {
						this.$queue.showToast(res.msg)
					}
				})
			},
			goMsg(byUserId, teamName) {
				let data = {
					userId: uni.getStorageSync('userId'),
					focusedUserId: byUserId,
					userType: 3
				}
				this.$Request.postJson('/app/chat/insertChatConversation ', data).then(res => {
					if (res.code == 0) {
						let id = byUserId == res.data.userId ? res.data.focusedUserId : byUserId
						uni.navigateTo({
							url: '/pages/msg/im?chatConversationId=' + res.data.chatConversationId +
								'&byUserId=' + id + '&teamName=' + teamName
						})
					}
				})
			},
			copyOrder(order) {
				let that = this;
				uni.setClipboardData({
					data: order,
					success: function() {
						that.$queue.showToast('复制成功')
					}
				})
			},
			getorderlist() {
				this.$queue.showLoading("加载中...");
				let data = {
					helpOrderId: this.helpOrderId,
				}
				this.$Request.get("/app/help/selectHelpOrderDetails", data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.orderList = res.data
						if (this.orderList.serviceName) {
							this.orderList.serviceName = this.orderList.serviceName.split('/')
							this.orderList.serviceName = this.orderList.serviceName[0]
						}
						if (this.orderList.image) {
							this.orderList.image = this.orderList.image.split(',')
						}
						if (this.orderList.helpTake.startTaskImg) {
							this.orderList.helpTake.startTaskImg = this.orderList.helpTake.startTaskImg.split(',')
						}
						if (res.data.helpTake) {
							this.getStaffUser(res.data.helpTake.companyId)
						}
						if (this.orderList.helpTake.endTaskImg) {
							this.orderList.helpTake.endTaskImg = this.orderList.helpTake.endTaskImg.split(',')
						}

					}
				});
			},
			getlist() {
				let data = {
					page: this.page,
					limit: this.limit,
					phone: this.search,
				}
				this.$Request.get("/app/user/selectUserList", data).then(res => {
					if (res.code == 0) {
						if (this.page == 1) {
							this.list = res.data.list
						} else {
							this.list = [...this.orderList, ...res.data.list]
						}
					}
					uni.stopPullDownRefresh();
				});
			},
			// 输入验证码
			openCode(e) {
				if (this.endImgs.length == 0) {
					uni.showToast({
						title: '请上传服务后照片',
						icon: 'none'
					})
					return
				}
				if (this.endImgs.length <= 3) {
					uni.showToast({
						title: '图片最少四张',
						icon: 'none'
					})
					return
				}
				this.codeNum = ''
				this.show = true
				this.helpTakeId = e.helpTakeId
				this.helpOrderId = e.id
			},
			change(e) {
				this.codes = e
			},
			sure() {
				if (!this.codes) {
					uni.showToast({
						title: '请输入确认码',
						icon: 'none'
					})
					return
				}
				this.endImg = this.endImgs
				this.endImg = this.endImg.toString()
				this.show = false
				let data = {
					helpTakeId: this.helpTakeId,
					helpOrderId: this.helpOrderId,
					code: this.codes,
					endTaskImg: this.endImg
				}
				this.$Request.post('/app/help/closeOrder', data).then(res => {
					if (res.code == 0) {
						this.codes = ''
						uni.navigateBack()
					} else {
						this.show = false
						this.codes = ''
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 1000
						})
					}
				})
			},
			// 一键导航
			bindGps(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			// 拨打电话
			bindphone(phone) {
				let that = this

				uni.showModal({
					title: '提示',
					content: '是否拨打电话',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定', that.phone);
							uni.makePhoneCall({
								phoneNumber: phone //仅为示例
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			// 查看图片
			saveImg(imgs, index) {
				if (this.LBSelect) {
					if (index == this.LBIndex - 1) {
						return;
					}
				}
				// console.log(imgs)
				let that = this;
				let imgArr = imgs
				// imgArr.push(imgs);
				// //预览图片
				uni.previewImage({
					urls: imgArr,
					current: imgArr[index]
				});
			},
			// 取消订单
			cancelOrder(e) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定取消订单吗？',
					success: function(res) {
						if (res.confirm) {
							let data = {
								id: e.helpTakeId
							}
							that.$Request.post('/app/help/endHelpTake', data).then(res => {
								if (res.code == 0) {
									uni.navigateBack()
								}
							})
						}
					},
				})
			}, //开始服务
			cancelOrder1(e) {
				let that = this
				if (that.startImgs.length == 0) {
					uni.showToast({
						title: '请上传服务前照片',
						icon: 'none'
					})
					return
				}
				if (that.startImgs.length <= 3) {
					uni.showToast({
						title: '图片最少四张',
						icon: 'none'
					})
					return
				}
				that.startImg = that.startImgs
				that.startImg = that.startImg.toString()
				that.reverTrue = false
				uni.showModal({
					title: '提示',
					content: '确定开始服务吗？',
					success: function(res) {
						if (res.confirm) {
							let data = {
								helpOrderId: e.id,
								startTaskImg: that.startImg
							}
							that.$Request.post('/app/help/startHelperOrder', data).then(res => {
								if (res.code == 0) {
									uni.navigateBack()
								}
							})
						}
					},
				})
			},
			removeImg(index, state) {
				if (state == 1) {
					this.startImgs.splice(index, 1)
				} else if (state == 2) {
					this.endImgs.splice(index, 1)
				}
			},
			// 图片上传
			addImage(e) {
				let that = this
				uni.chooseImage({
					count: 6,
					sourceType: ['album', 'camera'],
					success: res => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							that.$queue.showLoading("上传中...");
							uni.uploadFile({ // 上传接口
								// url: this.config("APIHOST1") + '/alioss/upload', //真实的接口地址
								url: 'https://jiazhengsfv5.xianmaxiong.com/sqx_fast/alioss/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: (uploadFileRes) => {
									if (e == 1) {
										console.log(JSON.parse(uploadFileRes.data).data)
										that.startImgs.push(JSON.parse(uploadFileRes.data).data)
									} else if (e == 2) {
										that.endImgs.push(JSON.parse(uploadFileRes.data).data)
									}
									uni.hideLoading();
								}
							});
						}
					}
				})
			},
			onReachBottom: function() {
				this.page = this.page + 1;
				this.getlist()
			},
			onPullDownRefresh: function() {
				this.page = 1;
				this.getlist()
			}
		}
	}
</script>

<style>
	page {
		background: #F2F2F2;
	}

	.bg {
		background: #FFFFFF;
	}

	.box {
		flex: 1;
		text-align: center;
	}

	.active {
		background: #F2F5FF;
	}



	.btn {
		background-color: #557EFD;
		border-radius: 8upx;
		width: 90%;
		margin: 0 auto;
		color: #FFFFFF;
		text-align: center;
		padding: 25upx 0;
		position: fixed;
		bottom: 30upx;
		left: 0upx;
		right: 0upx;

	}

	.lianxi {
		background: #557EFD;
		color: #FFFFFF;
		display: inline-table;
		border-radius: 8upx;
		padding: 10upx 15upx;
	}

	.tabber {
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
		z-index: 999;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 20upx 30upx;
	}

	.btn1 {
		width: 330upx;
		height: 78upx;
		background: #D9D9D9;
		border-radius: 16upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 78upx;
	}

	.btn2 {
		width: 330upx;
		height: 78upx;
		background: #557EFD;
		border-radius: 16upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 78upx;
	}

	.btn3 {
		background: #557EFD;
		border-radius: 16upx;
		text-align: center;
		color: #FFFFFF;
		padding: 20rpx 10rpx;
		margin-top: 60rpx;
	}

	.wensheng {
		width: 380rpx;
	}

	.buttn {
		background: #557EFD;
		color: #fff;
		padding: 20upx 38upx;
		border-radius: 24upx;
	}
</style>
